import type { QuickSearchTag } from './types'
import { PROJECT_PREFIX } from '../../types/constants'

/**
 * 生成标签样式
 * @param tags 标签配置数组
 */
function generateTagStyles(tags: QuickSearchTag[] = []): string {
  return tags.map(tag => `
    .tag[data-type="${tag.type}"] {
      background: ${tag.bgColor || 'rgba(0, 0, 0, 0.05)'} !important;
      color: ${tag.textColor || '#333'} !important;
      ${tag.hoverBgColor ? `&:hover { background: ${tag.hoverBgColor} !important; }` : ''}
    }
  `).join('')
}

export function styles(className: string, tags?: QuickSearchTag[]): string {
  const tagStyles = generateTagStyles(tags)

  return `
    .${className} {
      all: initial !important;
      position: relative !important;
      box-sizing: border-box !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 10px !important;
      width: 100% !important;
      
      .search-input-container {
        position: relative !important;
        width: 100% !important;
        
        input {
          padding: 8px 12px 8px 36px !important;
          border-radius: 20px !important;
          background-color: var(--${PROJECT_PREFIX}-theme-search-bg) !important;
          border: 1px solid var(--${PROJECT_PREFIX}-theme-border-neutral) !important;
          
          &:focus {
            border-color: none !important;
            box-shadow: none !important;
          }
        }
        
        .search-icon {
          position: absolute !important;
          left: 12px !important;
          top: 50% !important;
          transform: translateY(-50%) !important;
          color: #6c757d !important;
          pointer-events: none !important;
        }
        
        .clear-btn {
          position: absolute !important;
          right: 12px !important;
          top: 50% !important;
          transform: translateY(-50%) !important;
          background: none !important;
          border: none !important;
          padding: 4px !important;
          cursor: pointer !important;
          opacity: 0.5 !important;
          transition: opacity 0.2s !important;
          
          &:hover {
            opacity: 1 !important;
 
            svg {
              fill: #dd2537 !important;
            }
          }
          
          &[disabled] {
            display: none !important;
          }
        }
      }
      
      .quick-search-tags {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        
        .tag {
          padding: 4px 8px !important;
          border-radius: 12px !important;
          font-size: 12px !important;
          cursor: pointer !important;
          transition: all 0.2s !important;
          margin: 0px 4px !important;
          border: 1px solid var(--${PROJECT_PREFIX}-theme-code-toolbar-divider) !important;
        }
        
        ${tagStyles}
      }
      
      @media (max-width: 768px) {
        .search-input-container input {
          padding: 6px 10px 6px 32px !important;
          font-size: 13px !important;
        }
        
        .search-icon {
          left: 10px !important;
          font-size: 14px !important;
        }
        
        .clear-btn {
          right: 10px !important;
          padding: 3px !important;
          
          svg {
            width: 14px !important;
            height: 14px !important;
          }
        }
        
        .quick-search-tags {
          gap: 4px !important;
          
          .tag {
            padding: 3px 6px !important;
            font-size: 11px !important;
          }
        }
      }
    }
  `
}
